<template>
  <div class="studyMain">
    <div class="main">
      <div class="back" @touchend="backList" v-if="!this.variable.isMp"></div>
      <div class="content">
        <div class="modeBox" v-if="!explainName">
          <div class="mode" v-for="(item,index) in modeList" :key="index">
            <div class="mode-active" :style="userVipList[2].isActive || userVip.userFreeEntery? modeStyle(item) : ''">
              <div class="arrow" :style="userVipList[2].isActive || userVip.userFreeEntery? arrowStyle(item) : ''"></div>
            </div>
            <div class="mode-name" @touchend="explainTouch(item.name)">{{item.name}}</div>
          </div>
        </div>
        <div class="modeBox" v-if="explainName">
          <i></i>
          <div class="name">{{explainName}}</div>
          <p v-html="mastery.studyExplain[explainName].replace(/\n/g,'<br>')"></p>
        </div>
        <div class="table">
          <div class="tableBox">
            <canvas id="myCanvas" :style="canvasStyle" :width="width" :height="width"></canvas>
          </div>
          <div class="icon" v-for="(item,index) in modeList" :key="index" @touchend="explainTouch(item.name)"
               :style="iconStyle(index)">{{item.name}}</div>
        </div>
      </div>
    </div>

    <Vip ref="vip"/>
  </div>
</template>

<script>
  import { mapActions, mapGetters } from "vuex"
  import Vip from "../common/vip.vue"
  export default {
    data() {
      return {
        modeList: [
          { name: "流体智力", newScore: 100, oldScore: 0 },
          { name: "晶体智力", newScore: 100, oldScore: 0 },
          { name: "短时记忆", newScore: 100, oldScore: 0 },
          { name: "视觉加工", newScore: 100, oldScore: 0 },
          { name: "加工速度", newScore: 100, oldScore: 0 }
        ],
        width: 10 * this.fontSize,
        scale: 0,
        test: 100,
        timer: null,
        explainName: ""
      }
    },
    components:{
      Vip
    },
    created() {
      //修改changed
      const mstery = JSON.parse(JSON.stringify(this.mastery))
      if (mstery.changed) {
        const json = { deviceUuid: this.deviceUuid }
        this.$post(this.api.showMstery, json)
        this.modeList = this.modeList.map((item, index) => {
          item.oldScore = Math.ceil(mstery.oldScoreMap[index + 1])
          item.newScore = Math.ceil(mstery.newScoreMap[index + 1])
          return item
        })
        mstery.changed = false
        this.setUserMastery(mstery)
      } else {
        this.modeList = this.modeList.map((item, index) => {
          item.oldScore = Math.ceil(mstery.oldScoreMap[index + 1])
          item.newScore = Math.ceil(mstery.oldScoreMap[index + 1])
          return item
        })
      }
    },
    mounted() {
      /*用户查看评测权限*/
      this.$refs.vip.isBack = true
      if(this.userVipList[2].isActive || this.userVip.userFreeEntery){
        this.caverPath()
      }else {
        if(!this.userVipList[2].isActive){
          this.$refs.vip.vipEvaluateTouch()
        }
        this.$refs.vip.vipShowTouch()
      }

    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    computed: {
      canvasStyle() {
        return {
          transition: "all .5s",
          transform: "scale(" + this.scale + ")"
        }
      },
      iconStyle(index) {
        return function (index) {
          const ce = { x: 10.5 * this.fontSize, y: this.windowHeight * 0.35 },
                  r = 7. * this.fontSize
          let arr = []
          for (let i = -18; i < 360; i = i + (360 / this.modeList.length)) {
            const x = ce.x + Math.cos(Math.PI * 2 / 360 * i) * r,
                    y = ce.y + Math.sin(Math.PI * 2 / 360 * i) * r
            arr.push({ x: x, y: y })
          }
          const marginTop = arr[index].y < this.windowHeight * 0.35 ? -0.76 : -1
          return {
            top: arr[index].y + "px",
            left: arr[index].x + "px",
            marginTop: marginTop + "rem",
            marginLeft: "-1.1rem"
          }
        }
      },
      modeStyle(item) {
        return function (item) {
          const background = item.newScore < 50 ? '#ff7201'
                  : item.newScore < 80 ? '#ffba01'
                          : '#ff9601'
          return {
            height: '100%',
            width: item.newScore + '%',
            background: background
          }
        }
      },
      arrowStyle(item) {
        return function (item) {
          const background = item.newScore < 50 ? "url(" + this.variable.STATICE_URLTITLE + "study/火箭头-红色.png)0 0/100% 100%"
                  : item.newScore < 80 ? "url(" + this.variable.STATICE_URLTITLE + "study/火箭头-黄.png)0 0/100% 100%"
                          : "url(" + this.variable.STATICE_URLTITLE + "study/火箭头-橘色.png)0 0/100% 100%"
          return {
            background: background
          }
        }
      },
      ...mapGetters("personalStatus", {
        mastery: "getUserMastery"
      }),
      ...mapGetters("picbookListStatus", {
        picbookList: "getPicbookList",
      }),
      ...mapGetters("seedActivityStatus", {
        seedActivity: "getSeedActivity",
        seedPicbook: "getSeedPicbook",
        isResulteShow: "getIsResulteShow"
      }),
      ...mapGetters("personalStatus",{
        userVip: "getUserVip",
        userVipList: "getUserVipList",
        userRouter: "getUserRouter"
      }),
    },
    methods: {
      //绘制图形
      caverPath: function(){
        //绘制图形
        const context = document.getElementById("myCanvas").getContext("2d")
        let oldScore = this.modeList.map(item => {
                  return item.oldScore
                }),
                newScore = this.modeList.map(item => {
                  return item.newScore
                })
        this.drawPath(context, 5, oldScore)
        //图形初始从0变大
        setTimeout(() => {
          this.scale = 1
        }, 200)
        setTimeout(() => {
          this.timer = setInterval(() => {
            //旧数据变成新数据
            oldScore = oldScore.map((item, index) => {
              if (item < newScore[index]) item = item + 0.5
              if (item > newScore[index]) item = item - 0.5
              return item
            })
            //清除画布再绘制
            context.clearRect(0, 0, this.width, this.width)
            this.drawPath(context, 5, oldScore)
            //新数据和旧数据相等清除定时器
            if (oldScore.toString() === newScore.toString()) clearInterval(this.timer)
          }, 16)
        }, 1000)
      },
      drawPath: function (context, n, r) {
        const ang = [72, 72, 72, 72, 72],
                X = this.width / 2.01,
                Y = this.width / 1.83
        context.save() //保存状态
        context.fillStyle = 'rgb(212,89,37,.4)' //填充
        context.translate(X, Y) //多边形中心
        context.beginPath()
        for (let i = 0; i < ang.length; i++) {
          context.rotate(Math.PI / 180 * ang[i]) //旋转
          const line = Y / 100 * r[i]
          context.lineTo(0, -line)
        }
        context.closePath()
        context.fill()
        context.restore() //返回原始状态
      },
      explainTouch: function (name) {
        this.clickMusic()
        this.explainName = name
      },
      backList: function () {
        this.touchMusic()
        this.setUserFreeEntery(false)
        if(this.userVipList[2].evaluateActive && this.mastery.changed){
          this.userVipList[2].evaluateActive = false
          this.setUserVipList(this.userVipList)
        }
        this.isResulteShow ? this.setPopup({
          content: "活动测评详情请前往公众号中我的测评查看结果",
          callback: () => {
            this.$router.replace({ path: "/recommendList" })
          }
        }) : this.setLoading({
          callback: () => {
            if(this.userRouter){
              this.$router.push({ path:this.userRouter})
              setTimeout(()=>{this.setUserRouter('')},0)
            } else {
              this.$router.go(-1)
            }

          }
        })
      },
      ...mapActions("mainStatus", ["setLoading", "setPopup"]),
      ...mapActions("personalStatus", ["setUserMastery","setUserFreeEntery",'setUserRouter','setUserVipList']),
      ...mapActions("seedActivityStatus", ["setSeedPicbook"])
    },
    watch: {
      userVipList: function (userVipList) {
        if(userVipList[2].isActive) this.caverPath()
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import '../../common/stylus/base.styl'
  .studyMain
    position fixed
    width 100%
    height 100%
    z-index 99
    .main
      position absolute
      width 100vw
      height 100vh
      transform translate(calc(0px - var(--X)), calc(0px - var(--Y)))
      background url($urlTitle + 'study/背景.png') 0 0 / 100% 100%
      .back
        background url($urlTitle + 'icon/icon-返回.png') 0 0 / 100% 100%
        $coord('WHLT', 11vh, 10.8vh, 2rem, 1.5rem)
      .content
        position absolute
        height 70vh
        width 42rem
        top calc(5vh + 3.6rem)
        left 3rem
        .title
          background url($urlTitle + 'study/我的学习.png') 0 0 / 100% 100%
          $coord('WHLT', 30vh, 6.2vh, 0rem, 0rem)
        .modeBox
          $coord('WHRT', 21.2rem, 45.6vh, 0rem, 15.2vh)
          display flex
          flex-wrap wrap
          justify-content start
          align-items center
          color rgb(252, 111, 40)
          i
            $coord('WHLT', 0.5rem, 0.5rem, 0, 10vh)
            background rgb(252, 111, 40)
            border-radius 50%
          p
            color #ffa062
            font-size 1rem
            text-align left
            text-indent 1rem
            margin 3.5rem 4rem 0 2rem
            line-height 1.3rem
          .name
            $coord('WHLT', 8rem, 1.2rem, 1.5rem, 10vh)
            transform translateY(-0.3rem)
            font-size 1.2rem
            text-align left
          .mode
            width 15rem
            height 0.3rem
            background url($urlTitle + 'study/进度条背景.png') 0 0 / 100% 100%
            .mode-active
              opacity 0
              transform scale(0)
              animation bounce-recCard 1s
              animation-fill-mode forwards
              border-radius 0.15rem
              .arrow
                position absolute
                right -0.5rem
                top -0.2rem
                width 1rem
                height 0.7rem
            .mode-name
              position absolute
              width 4rem
              height 1rem
              color #ffa062
              font-size 0.8rem
              margin-top -1.8rem
        .table
          $coord('WHLT', 21rem, 70vh, 0rem, 1rem)
          .tableBox
            position absolute
            $center('WHLT', 11rem, 11rem)
            background url($urlTitle + 'study/五维图的背景.png') 0 0 / 100% 100%
          .icon
            position absolute
            width 2rem
            height 2.3rem
            color #ffa062
            font-size 0.8rem
            font-weight bold
</style>
